<template lang="pug">
  div
    el-radio-group.tabTypes.mb20(v-model="curTabKey" @change="change")
      el-radio-button(v-for="tab in tabs" :key="tab.name" :label="tab.name") {{tab.meta.title}}
    router-view
</template>
<script>
import { mapGetters } from 'vuex'
import { findTreeNode } from '@/utils/arrayToTree'

export default {
  data () {
    return {
      curTabKey: 'finance::charge::setting::project',
      tabs: []
    }
  },
  computed: {
    ...mapGetters(['addRoutes'])
  },
  async created () {
    console.log(this.$route)
    const node = await findTreeNode({ value: 'finance::charge::setting', key: 'name', tree: this.addRoutes })
    this.tabs = node.children
    if (node.children[0] && this.$route.name === 'finance::charge::setting') {
      this.$router.push(node.children[0].path)
      return
    }
    this.curTabKey = this.$route.name
  },
  methods: {
    async change (name) {
      console.log(name)
      const node = await findTreeNode({ value: name, key: 'name', tree: this.addRoutes })
      this.$router.push(node.path)
    },
    routeToggle (tab) {
      console.log(tab)
      this.$router.push(tab.path)
    }
  }
}
</script>
